<template>
    <div>
        <!-- 面包屑导航 -->
        <BreadDetail :category="infoobj.categories" :name="infoobj.name"></BreadDetail>
        <!-- 商品基本信息区 -->
        <div class="goods-info">
            <div class="media">
                <goodsImage :imgarr="infoobj.mainPictures" />
                <img src="../assets/img/放大镜底图.png" alt="" style="width:400px;margin-top:40px;">
            </div>
            <div class="spec">
                <p style="font-size:24px;margin-bottom:10px;">{{ infoobj.name }}</p>
                <p style="font-size:18px;color:#ccc;margin-bottom:10px;">{{ infoobj.desc }}</p>
                <p style="margin-bottom:10px;"><span style="font-size:26px;color:red;">￥{{ infoobj.price }}</span>
                    <s>{{ infoobj.oldPrice }}</s>
                </p>
                <section>
                    <p>促销&nbsp;&nbsp;&nbsp;12月好物放送，App领券购买直降120元</p>
                    <!-- 城市下拉组价 -->
                    <p>配送&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;
                        <CityView :fullCityData="fullCityData" @setFullData="changeFullData"></CityView>
                    </p>
                    <p>服务&nbsp;&nbsp;&nbsp;无忧退货&nbsp;&nbsp;快速退款&nbsp;免费包邮&nbsp;<span style="color:#63ba9b;">了解详情</span>
                    </p>
                </section>
                <!-- 规格1369155859933827074 -->
                <GoodsSku :specs="infoobj.specs" :skus="infoobj.skus" @send="getSkuData"></GoodsSku>
                <button class="but" @click="addCart">加入购物车</button>
            </div>
        </div>
        <!-- 同类商品推荐 -->
        <DetailSame></DetailSame>
        <!-- 详情和评价 -->
        <div class="goodsFather">
            <div class="left">
                <div class="goods-tabs">
                    <nav>
                        <a class="active" href="javascript:;">商品详情</a>
                        <a href="javascript:;">商品评价<span>(500+)</span></a>
                    </nav>
                    <!-- 切换内容的地方 -->
                    <DetailTab :details="infoobj.details"></DetailTab>
                </div>
            </div>
            <div class="right">
                <div class="top">24销售热销榜</div>
                <ul>
                    <li v-for="item in hotList" :key="item.id">
                        <img :src="item.picture" alt="">
                        <p>{{ item.name }}</p>
                        <p>{{ item.desc }}</p>
                        <p>
                            <span style="color:red;">{{ item.price }}</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
import { getDetail } from "@/utils/api/detailapi";
import { getHot } from '@/utils/api/detailapi'
import BreadDetail from "./BreadDeilView.vue";
import goodsImage from './DetailImage.vue'
import DetailSame from './DetailSame.vue'
import CityView from "@/components/DetailCity.vue";
import DetailTab from '@/components/DetailTab.vue'
import GoodsSku from '@/components/GoodsSku.vue'
export default {
    components: { BreadDetail, goodsImage, DetailSame, CityView, DetailTab, GoodsSku },
    data() {
        return {
            infoobj: {},
            fullCityData: {
                procode: null,
                proname: "北京市",
                citycode: null,
                cityname: "市县区",
                coucode: null,
                couname: "东城区",
            },
            hotList: [],
            skuobj: {},
            cont: 1,
        };
    },
    mounted() {
        this.getDetailList(this.$route.query.id);
        this.getHotList();
    },
    methods: {
        // 接收同规格组件传递的数据
        getSkuData(obj) {
            this.skuobj = obj;
        },
        /* 获取同类推荐商品数据 */
        async getDetailList(id) {
            let res = await getDetail(id);
            this.infoobj = res.result
            // console.log(res);
        },
        /* 获取热销推荐商品数据 */
        async getHotList() {
            let res = await getHot();
            this.hotList = res.result
            // console.log(res);
        },
        /* 城市数据 */
        changeFullData(obj) {
            this.fullCityData = obj;
        },
        /* 添加购物车 */
        addCart() {
            // 检查规格是否合适
            if (!this.skuobj.skuid) {
                this.$message({ text: "请选择商品的规格", type: "error" });
                return false;
            }
            //判断库存是否充足  number
            if (this.skuobj.inventory < this.count) {
                this.$message({ text: "库存不足", type: "error" });
                return false;
            }
            //判断当前规格产品是否再购物车中存在
            let index = this.$store.state.cart.list.findIndex(
                (item) => item.skuid == this.skuobj.skuid
            );
            // console.log(this.skuobj);
            if (index == -1) {
                //存商品
                let obj = {
                    ...this.skuobj,
                    count: this.cont,
                    selected: true,
                    goodsname: this.infoobj.name,
                    img: this.infoobj.mainPictures[0],
                };
                //调用vuex中的方法
                this.$store.commit("cart/addList", obj);
            } else {
                //加数量
                this.$store.commit("cart/changeNum", { index, number: this.cont });
            }
            // alert(2345)
            this.$router.push('/cart')
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
    }

    .spec {
        flex: 1;
        // background-color: red;
        padding: 30px 30px 30px 0;

        section {
            width: 80%;
            height: 140px;
            background-color: #eee;
            padding: 20px 20px 20px 16px;

            p {
                font-size: 18px;
                margin-bottom: 10px;
            }
        }

        .but {
            width: 160px;
            height: 50px;
            background: $xtxColor;
            border: none;
            color: #fff;
            border-radius: 5px;
            font-size: 18px;
            margin-top: 20px;
        }
    }
}

.goodsFather {
    width: 100%;
    // height: 100px;
    margin-top: 20px;
    // background-color: red;
    display: flex;
    justify-content: space-between;

    .left {
        width: 73%;
        // height: 100%;
        background-color: white;

        .goods-tabs {
            min-height: 600px;
            background: #fff;

            nav {
                height: 70px;
                line-height: 70px;
                display: flex;
                border-bottom: 1px solid #f5f5f5;

                a {
                    padding: 0 40px;
                    font-size: 18px;
                    position: relative;

                    >span {
                        color: $priceColor;
                        font-size: 16px;
                        margin-left: 10px;
                    }

                    &:first-child {
                        border-right: 1px solid #f5f5f5;
                    }

                    &.active {
                        &::before {
                            content: "";
                            position: absolute;
                            left: 40px;
                            bottom: -1px;
                            width: 72px;
                            height: 2px;
                            background: $xtxColor;
                        }
                    }
                }
            }
        }
    }

    .right {
        width: 25%;

        // height: 100%;
        // background-color: white;
        .top {
            width: 100%;
            line-height: 80px;
            background-color: #e26237;
            padding-left: 30px;
            color: white;
            font-size: 20px;
        }

        ul {
            width: 100%;

            li {
                width: 100%;
                height: 400px;
                background-color: white;
                margin-top: 10px;
                padding: 20px 40px;

                img {
                    width: 100%;
                    height: 70%;
                }

                p {
                    margin-top: 10px;
                    text-align: center;
                    font-size: 20px;
                    overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                    white-space: nowrap; //（设置文字在一行显示，不能换行）
                    text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
                }
            }
        }
    }
}
</style>